<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<div class="welcome">Welcome! {{ userinfo.firstName }} {{ userinfo.lastName }}</div>
		<div class="gavinList f f-a-c f-w-w">
			<div @click="goUseProfile" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/1.png" class="topImg" alt="" />
					<div class="profile">My profile</div>
				</div>
				<div class="count">Provide personal details and how we can reach you</div>
			</div>
			<div @click="goPayment" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/2.png" class="topImg" alt="" />
					<div class="profile">My club</div>
				</div>
				<div class="count">Review payments, payouts and coupons</div>
			</div>
			<div @click="goPayoutMethod" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/3.png" class="topImg" alt="" />
					<div class="profile">Favorite</div>
				</div>
				<div class="count">View your gigs status and create a new one</div>
			</div>
			<div @click="goPayoutMethods" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/4.png" class="topImg" alt="" />
					<div class="profile">Payout method</div>
				</div>
				<div class="count">View your favorite experts and articles</div>
			</div>
			<div @click="goNotifications" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/5.png" class="topImg" alt="" />
					<div class="profile">Notifications</div>
				</div>
				<div class="count">Choose notification preferences and how you want to be contacted</div>
			</div>
			<div @click="goVerify" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/6.png" class="topImg" alt="" />
					<div class="profile">Verify</div>
				</div>
				<div class="count">View your verify status</div>
			</div>
			<div @click="goHelp" class="gainItem hand f f-j-c f-d-c">
				<div class="name f f-a-c">
					<img src="/src/assets/come/7.png" class="topImg" alt="" />
					<div class="profile">Help & Support</div>
				</div>
				<div class="count">Learn how to use Xpert, fix a problem, and get answers to your questions.</div>
			</div>
		</div>
		<!-- 下面的提示Need to deactivate your account? -->
		<div class="deactivate">
			<div class="deactivateCon">Need to deactivate your account?</div>
			<div @click="deactivateA" class="deactivateA hand">Take care of that now</div>
		</div>
		<!-- faq -->
		<div class="faq">
			<div class="faqTop">FAQ</div>
			<div class="faqBody">
				<div v-for="(item, index) in faqList" @click="goDetils(item)" :key="index" class="faqItem hand f f-a-c f-j-b p-l-10 p-r-10">
					<div class="countNei">{{ item.title }}</div>
					<img src="/src/assets/user/2.png" class="img" alt="" />
				</div>
				<div @click="router.push('/BlogFAQs')" class="more hand">More</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { CreateVerifys, FaqsLists, DisplaySellerInformation } from "@/api/knowClub/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	const statusTab = ref(1);
	const faqList = ref([]);
	const total = ref(0);
	const userinfo = ref({});
	const pageNum = ref(1);
	onMounted(() => {
		initUser();
		initFaqList();
		window.addEventListener("scroll", handleScroll);
	});
	const goDetils = item => {
		router.push({
			path: "/HelpSupportDetils",
			query: {
				id: item.id,
				str: "FAQ"
			}
		});
	};
	const initUser = async () => {
		let n = await DisplaySellerInformation({
			userId: JSON.parse(localStorage.getItem("logininfo") || "{}").userIdKc
		});
		userinfo.value = n.data;
	};
	const goUseProfile = () => {
		router.push({ path: "/KnowClubMyProfile" });
	};
	const goPayoutMethod = () => {
		router.push({ path: "/KnowCreateFavorite" });
	};
	const goNotifications = () => {
		// router.push({ path: "/KnowCreateNotifications" });
		router.push({
			path: "/UseNotifications",
			query: {
				act: 2,
				num: 2
			}
		});
	};
	const deactivateA = () => {
		router.push({ path: "/SellkDeactiveAccount" });
	};
	// const goVerify = () => {
	// 	router.push({
	// 		path: "/Verify",
	// 		query: {
	// 			act: 2
	// 		}
	// 	});
	// };
	const initFaqList = async () => {
		let n = {};
		n = await FaqsLists({ pageNum: pageNum.value });

		total.value = n.data.total;
		faqList.value = [...faqList.value, ...n.data.list];
	};
	const goPayoutMethods = () => {
		router.push({
			path: "/PayoutMethod",
			//PayoutMethod
			query: {
				act: 2
			}
		});
	};
	const goHelp = () => {
		router.push({
			path: "/HelpSupport",
			query: {
				act: 2
			}
		});
	};
	// goVerify判断进入哪个
	const goVerify = async () => {
		let n = await CreateVerifys();
		let status = n.data.status; //	0 待审核 1审核通过 2 不通过
		if (n.data) {
			if (n.data.status == 0) {
				router.push({
					path: "/VerifyResults",
					query: {
						num: 3
					}
				});
			} else if (n.data.status == 1) {
				router.push({
					path: "/VerifyResults",
					query: {
						num: 4
					}
				});
			} else if (n.data.status == 2) {
				router.push({
					path: "/VerifyResults",
					query: {
						num: 5
					}
				});
			}
		} else {
			router.push({
				path: "/Verify",
				query: {
					act: 2
				}
			});
		}
		return;
		router.push({
			path: "Verify",
			query: {
				act: 2
			}
		});
	};
	// 去goPayment
	const goPayment = () => {
		router.push({ path: "/KnowClubMyClubb" });
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
